﻿<template>
    <div class="person">
        <h2>豪车</h2>
        <p>一辆{{ car.brand }},价值{{ car.price }}万</p>
        <button @click="changePrice">修改价格</button>
        <h2>修改车</h2>
        <button @click="changeCar">修改汽车</button>

        <br>
        <h2>游戏列表:</h2>
        <li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
        <button @click="chanegGName">修改游戏名字</button>
        
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { reactive } from 'vue';
    import { ref } from 'vue';
    // 1. 数据
    let car = reactive({brand:"奔驰",price:100})
    let games = reactive([
        {id:'aysdytfsatr01',name:'王者荣耀'},
        {id:'aysdytfsatr02',name:'原神'},
        {id:'aysdytfsatr03',name:'三国志'}
    ])
    // 2. 函数
    function changePrice(){
        car.price += 10
    }
    function chanegGName(){
        games[0].name = "QQ飞车"
    }
    // ref定义对象类型数据 
    let car1 = ref({brand:"奔驰",price:100})
    let games1 = ref([
        {id:'aysdytfsatr01',name:'王者荣耀'},
        {id:'aysdytfsatr02',name:'原神'},
        {id:'aysdytfsatr03',name:'三国志'}
    ])
    // 2. 函数
    function changePrice1(){
        car1.value.price += 10
    }
    function chanegGName1(){
        games1.value[0].name = "QQ飞车"
    }
    // 修改整个 reactive 对象类型
    function changeCar(){
        // car = {brand:"奥拓",price:1}
        // car = reactive({brand:"奥拓",price:1}) // reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
        Object.assign(car,{brand:"奥拓",price:1})
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>